<template>

  <div id="app">
    <transition name="fade" mode="out-in">
      <keep-alive :max="10" include="Home,Order">
        <component :is="coms[currentIndex]" />
      </keep-alive>
    </transition>

    <div class="bottom">
      <span :class="{active: currentIndex == index }" v-for="(item,index) in btns" @click="handleClickBot(index)"
        :key="index">{{item}}</span>
    </div>
  </div>

</template>

<script>
import Home from "./components/Home.vue";
import Order from "./components/Order.vue";
import Mine from "./components/Mine.vue";
import Baobao from "./components/Baobao.vue"
export default {
  data() {
    return {
      currentIndex: 0,
      btns: ['首页','爆爆团', '订单', '我的'],
      coms: ['Home','Baobao', 'Order', 'Mine']
    }
  },
  components: {
    Order,
    Mine,
    Home,
    Baobao
  },
  methods: {
    handleClickBot(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
}

.bottom {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #666;
  align-items: center;
  background: #f5f5f5;
}
.active{
  color:lightskyblue;
}

.fade-enter{ 
  transform: rotate(0deg);
 
}
.fade-enter-active{
  transition: all 0.2s;
}
.fade-enter-to{ 
  transform:  rotate(360deg);
  
}

.fade-leave{ 
  transform:  rotate(360deg);
}
.fade-leave-active{
  transition: all 0.2s;
}
.fade-leave-to{ 
  transform:  rotate(0deg);
}
</style>
